import SwiftUI

struct AnimationCurves : View {
    @State var offsetY: CGFloat = 0
    @State var d: CGFloat = 50
    
    var body: some View {
        VStack(spacing: 30) {
            Text("Animation Curves")
                .font(.largeTitle)
            
            Text("Examples")
                .font(.title)
                .foregroundColor(.gray)
            
            Text("There are 4 present animation curves available to you.")
                .padding()
                .frame(maxWidth: .infinity)
                .background(Color.orange)
                .foregroundColor(.black)
                .font(.headline)
            
            makeDropView()
            
            Spacer()
            
            Button(action: {
                offsetY = offsetY == 600 ? 0 : 600
                d = 80
            }, label: {
                Text("Move")
                    .font(.title)
                    .padding()
            })
        }
        .navigationTitle("Curves")
    }
    
    func makeDropView() -> some View {
        HStack {
            Spacer()
            
            VStack {
                // 文字
                // 动画缓慢开始，加速进展，缓慢结束
                Text("EaseInOut")
                    .font(.headline)
                
                // 小球
                // position - 绝对位置
                // offset - 相对位置
                Circle()
                    .foregroundColor(.orange)
                    .frame(width: d, height: d)
                    .offset(y: offsetY)
                    .animation(.easeInOut, value: offsetY) // 基于位置的动画
                    .animation(.easeInOut, value: d) // 基于大小的动画
            }
            
            Spacer()
            
            VStack {
                // 文字
                // 动画开始之后就一直加速
                Text("EaseIn")
                    .font(.headline)
                
                // 小球
                Circle()
                    .foregroundColor(.orange)
                    .frame(width: 50, height: 50)
                    .offset(y: offsetY)
                    .animation(.easeIn, value: offsetY)
            }
            
            // VStack
            Spacer()
            
            VStack {
                // 文字
                // 动画开始之后就一直加速
                Text("EaseOut")
                    .font(.headline)
                
                // 小球
                Circle()
                    .foregroundColor(.orange)
                    .frame(width: 50, height: 50)
                    .offset(y: offsetY)
                    .animation(.easeOut, value: offsetY)
            }
            
            Spacer()
            
            VStack {
                // 文字
                // 动画开始之后就一直加速
                Text("Linear")
                    .font(.headline)
                
                // 小球
                Circle()
                    .foregroundColor(.orange)
                    .frame(width: 50, height: 50)
                    .offset(y: offsetY)
                    .animation(.linear, value: offsetY)
            }
            
            Spacer()
        }
    }
}




